<template>
  <div style="padding-bottom:80px">
    <!-- 顶部 -->
    <van-nav-bar title="产品" ></van-nav-bar>
    <!-- nav栏 -->
    <van-tabs @click="getNavId">
      <van-tab v-for="(item,index) in topNav" :key="index">
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item" >
              <span class="img-line"><img style="width:18%;" :src="item.img_url2" alt="">
              {{item.virtualWalletName}}</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 活期计划 -->
    <div class="plan-live" @click="urlTo">
      <p>
        活期计划
        <span>{{nameNow}}</span>
      </p>
      <p>{{contianLive.annualInterestRate}}%</p>
      <p>今日年化利率</p>
      <div class="plan-bottom">
        <div>
          <img src="../../assets/images/icon-combination.png" alt>
          <span>优选理财</span>
        </div>
        <div>
          <img src="../../assets/images/icon-manage.png" alt>
          <span>灵活存取</span>
        </div>
      </div>
    </div>

    <!-- 定期计划 -->
    <div class="plan-fixed">
      <p>定期计划</p>
      <div class="plan-all" v-for="(item,index) in contianFixed" :key="index">
        <div
          @click="fixedTo(
          item.annualInterestRate,
          item.lockedDays,
          item.remainingDays,
          item.minAmount,
          item.virtualWalletId,
          item.remainingDays,
          item.remainingAmount,
          item.planName,
          item.coinPlanId,)"
          class="plan-contian"
          v-if="item.numSingle==1?true:false"
        >
          <p>{{nameNow}} {{item.planName}}</p>
          <div>
            <div>
              <p>{{item.annualInterestRate}}%</p>
              <p>预期年化利率</p>
            </div>
            <div>
              <p>{{item.lockedDays}}天</p>
              <p>{{item.minAmount}} {{nameNow}}起投</p>
            </div>
            <div>
              <img src="../../assets/images/icon-background1.png" alt>
            </div>
          </div>
        </div>
        <div
          @click="fixedTo(
          item.annualInterestRate,
          item.lockedDays,
          item.remainingDays,
          item.minAmount,
          item.virtualWalletId,
          item.maxDays,
          item.remainingAmount,
          item.planName,
          item.coinPlanId,
          )"
          class="plan-contian"
          v-if="item.numSingle==0?true:false"
        >
          <p style="color:#999">{{nameNow}} {{item.planName}}</p>
          <div>
            <div>
              <p style="color:#999">{{item.annualInterestRate}}%</p>
              <p style="color:#999">预期年化利率</p>
            </div>
            <div>
              <p style="color:#999">{{item.lockedDays}}天</p>
              <p style="color:#999">{{item.minAmount}} {{nameNow}}起投</p>
            </div>
            <div>
              <img src="../../assets/images/icon-background-gray.png" alt>
            </div>
          </div>
        </div>
      </div>
    </div>
    <p v-if="pageBtm" style="font-size:10px;color:#ccc;margin-top:10px">没有更多了！</p>
  </div>
</template>
<script>
import { NavBar, Toast, Tab, Tabs } from "vant";
import { coinPlanShow, coinPlan } from "../../axios/api.js";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      topNav: [], //nav条数据
      numOne: "", //初始化数据及id值
      contianLive: [], //初始化活期内容及获取活期内容
      contianFixed: [], //初始化定期内容及获取定期内容
      nameNow: "", //获取当前名字及获取的名字
      page: 1,
      pageBtm: false
    };
  },
  created() {
    this.getNav();
    this.getCoinPlan();
    this.downUpp();
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //跳转到活期计划
    urlTo() {
      this.$router.push({ name: "currentPlan" });
    },
    // 获取nav条
    getNav() {
      coinPlanShow().then(res => {
        console.log(res.data,9999)
        this.topNav = res.data.data;
        this.numOne = res.data.data[0].virtual_wallet_id;
        this.nameNow = res.data.data[0].virtualWalletName;
      });
    },
    //获取获取内容
    getCoinPlan() {
      var that = this;
      coinPlan({
        params: {
          page: that.page,
          rows: 2,
          virtualWalletId: that.numOne
        }
      }).then(res => {
        console.log(res.data,111)
        that.contianLive = res.data.data.currentPlan;
        that.contianFixed = res.data.data.listCoinPlan;
        for (var i = 0; i < that.contianFixed.length; i++) {
          if (
            that.contianFixed[i].remainingDays > that.contianFixed[i].maxDays || that.contianFixed[i].remainingDays <= 0
          ) {
            that.contianFixed[i].numSingle = 0;
          } else {
            that.contianFixed[i].numSingle = 1;
          }
        }
        console.log(that.contianFixed, 333);
        console.log(that.contianLive, 222);
      });
    },
    //获取nav的id和name
    getNavId(index, title) {
      var that = this;
      console.log(that.topNav[index].virtual_wallet_id);
      that.numOne = that.topNav[index].virtual_wallet_id;
      that.nameNow = that.topNav[index].virtualWalletName;
      that.pageBtm = false;
      that.page = 1;
      //再次调用内容数据
      that.getCoinPlan();
    },
    //上拉加载
    downUpp() {
      var that = this;
      var startX, startY, endX, endY, X, Y;
      $("body")
        .on("touchstart", function(e) {
          var touch = e.originalEvent.targetTouches[0];
          startX = touch.pageX;
          startY = touch.pageY;
        })
        .on("touchend", function(e) {
          var touch = e.originalEvent.changedTouches[0];
          endX = touch.pageX;
          endY = touch.pageY;
          X = endX - startX;
          Y = endY - startY;
          if (Y < -30) {
            console.log(1);
            that.page++;
            coinPlan({
              params: {
                page: that.page,
                rows: 2,
                virtualWalletId: that.numOne
              }
            }).then(res => {
              for (var i = 0; i < res.data.data.listCoinPlan.length; i++) {
                that.contianFixed.push(res.data.data.listCoinPlan[i]);
              }
              for (var i = 0; i < that.contianFixed.length; i++) {
                if (
                  that.contianFixed[i].remainingDays > that.contianFixed[i].maxDays || that.contianFixed[i].remainingDays < 0
                ) {
                  that.contianFixed[i].numSingle = 0;
                } else {
                  that.contianFixed[i].numSingle = 1;
                }
              }
              if (res.data.data.listCoinPlan.length == 0) {
                that.pageBtm = true;
              }
            });
          }
        });
    },
    //定期跳转
    fixedTo(num1, num2, num3, num4, num5, num6, num7, num8, num9) {
      this.$router.push({
        path: "/planDetails",
        name: "planDetails",
        query: {
          annualInterestRate: num1,
          lockedDays: num2,
          virtualWalletName: this.nameNow,
          name: num3,
          minAmount: num4,
          id: num5,
          name2: num6,
          moreNum: num7,
          productName: num8,
          prodId:num9
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.img-line{
  display: flex;
  justify-content: center;
  align-items: center;
}
.plan-live {
  padding: 10px 0;
  box-sizing: border-box;
  p {
    padding: 0 10px;
    box-sizing: border-box;
  }
  p:nth-child(1) {
    text-align: left;
    font-size: 16px;
    color: #333;
    span {
      font-size: 11px;
      color: #d1a568;
      margin-left: 10px;
    }
  }
  p:nth-child(2) {
    font-size: 25px;
    color: #fc5353;
    margin: 25px 0 5px;
  }
  p:nth-child(3) {
    font-size: 11px;
    color: #999999;
  }
  .plan-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 10px;
    border-bottom: 10px solid #f6f6f8;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #666;
      img {
        width: 20%;
        margin-right: 4px;
      }
    }
  }
}
.plan-fixed {
  text-align: left;
  > p:nth-child(1) {
    font-size: 16px;
    color: #333;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .plan-all {
    padding: 10px 0;
    box-sizing: border-box;
    .plan-contian {
      padding-top: 10px;
      border-bottom: 10px solid #f6f6f8;
      > p:nth-child(1) {
        font-size: 14px;
        color: #333;
        padding: 0 10px;
        box-sizing: border-box;
      }
      > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        > div:nth-child(1) {
          width: 35%;
          p:nth-child(1) {
            font-size: 19px;
            color: #d1a658;
            margin-bottom: 8px;
          }
          p:nth-child(2) {
            font-size: 12px;
            color: #666;
          }
        }
        > div:nth-child(2) {
          width: 40%;
          p:nth-child(1) {
            font-size: 19px;
            color: #333;
            margin-bottom: 8px;
          }
          p:nth-child(2) {
            font-size: 12px;
            color: #666;
          }
        }
        > div:nth-child(3) {
          width: 25%;
          img {
            width: 90%;
          }
        }
      }
    }
  }
}
</style>
